<template>
  <div class="div1">
    <span>{{ "您的地址是:" + addresName }}</span>
    <div class="btn" @click="selectAddress">选择位置</div>
    <div class="mask" @click="selectAddress" v-show="isShow">
      <div :class="isShow ? 'maskContent scale':'maskContent'" @click.stop >
          <div class="maskContentTitle">
          <input type="text" @keyup.enter="editAddress" id="address" />
          <div
            id="searchResultPanel"
            style="
              border: 1px solid #c0c0c0;
              width: 150px;
              height: auto;
              display: none;
            "
          ></div>
        </div>
        <div id="map"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, watch, toRefs, onMounted, reactive } from "vue";
import {
  getUserPosition,
  initMap,
  accordingIpCity,
  accprdingCityNamePostion,
} from "../../util/Map.js";
var marker1; //保证点的唯一
var circle;
var ac = null; //联想类
var isShowAutocomplete = false;
export default {
  setup() {
    let address = getUserPosition();
    let isShow = ref(false);
    let obj = reactive({
      editAddress: ()=>{
        accprdingCityNamePostion(address.addresName, (point) => {
        address.position = point;
      })
      }
    });

    ac = new BMap.Autocomplete({ input: "address" }); //建立一个自动完成的对象
    //  监视回车选中某条记录后触发
    ac.addEventListener("onconfirm", () => {
      obj.editAddress();
    });

    watch(address, (newAddress, preAddress) => {
      if (!window.mapInstance) {
        initMap("map", newAddress.position);
      }
      // 给input设置value 不会触发下拉联想
      ac.setInputValue(address.addresName);
      var BPonit = new BMap.Point(
        newAddress.position.lng,
        newAddress.position.lat
      );
      if (marker1) {
        // 存在标记的话,第2次删除
        mapInstance.removeOverlay(marker1);
        mapInstance.removeOverlay(circle);
      }
      //创建标记
      marker1 = new BMap.Marker(BPonit, {
        enableDragging: true,
      });
      // 标记拖拽移动时
      marker1.addEventListener("dragend", function (info) {
        const { point } = info;
        address.position = point;
        accordingIpCity(point, (data) => {
          let { city, district, province, street, streetNumber } = data;
          address.addresName =
            province + city + district + street + streetNumber;
        });
      });
      mapInstance.addOverlay(marker1);

      // 绘制圆
      circle = new BMap.Circle(BPonit, 300, {
        strokeColor: "#18A65E",
        strokeWeight: 2,
        fillColor: "#18A65E",
        formData: 0.1,
      });
      mapInstance.addOverlay(circle);
      mapInstance.panTo(BPonit);
    });
    return {
      ...toRefs(address),
      ...toRefs(obj),
      isShow,
    };
  },
  methods: {
    // 选择位置
    selectAddress() {
      this.isShow = !this.isShow;
    },
  },
};
</script>
<style scoped>
.btn {
  display: inline-block;
  width: 88px;
  height: 32px;
  padding: 0 10px;
  line-height: 32px;
  text-align: center;
  line-break: 32px;
  vertical-align: middle;
  border: 1px solid #000;
  margin-left: 10px;
}
.btn:active {
  border: 1px solid #409eff;
  color: #409eff;
}
.mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.65);
  perspective: 700px;
  transform-style: preserve-3d;
}
.maskContent {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 520px;
  height: 590px;
  transition: 1s;
  background-color: #fff;
  transition: 1s linear;
  transform: translate(-50%, -50%);
}
.maskContentTitle {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20%;
  border: 1px solid #ccc;
}
#map {
  width: 520px;
  height: 80%;
}
.scale {
 animation: 0.4s sf;
 transition: 0.7s linear;
}
@keyframes sf {
  0% {
    transform:translate(-50%, -50%) scale(0,0);
  }
  100% {
     transform:translate(-50%, -50%) scale(1,1);
  }
}

</style>